import { Dialog, DialogContent } from '@/components/bs-ui/dialog'
import { Download, Import } from 'lucide-react'
import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { getSourceChunksApi, splitWordApi } from '../../../controllers/API'
import { downloadFile } from '../../../util/utils'
import FileView, { checkSassUrl } from './FileView'

// 顶部答案区
const Anwser = ({ id, msg, onInit, onAdd }) => {
  const [html, setHtml] = useState('')
  const pRef = useRef(null)

  // init
  useEffect(() => {
    onInit([])
    msg &&
      splitWordApi(msg, id).then(res => {
        // 匹配
        const reg = new RegExp(`(${res.join('|')})`, 'g')
        setHtml(msg.replace(reg, '<span>$1</span>'))
        onInit(res)
      })
  }, [])

  // add
  useEffect(() => {
    const handleclick = e => {
      if (e.target.tagName === 'SPAN') {
        onAdd(e.target.innerText)
      }
    }
    pRef.current.addEventListener('click', handleclick)
    return () => pRef.current?.removeEventListener('click', handleclick)
  }, [])

  return (
    <div className="max-h-24 overflow-y-auto rounded-md bg-gray-100 px-2 py-4">
      <p ref={pRef} className="anwser-souce" dangerouslySetInnerHTML={{ __html: html }}></p>
    </div>
  )
}

//
let timer = null
const ResultPanne = ({
  chatId,
  words,
  data,
  onClose,
  onAdd,
  children
}: {
  chatId: string
  words: string[]
  data: any
  onClose: any
  onAdd: any
  children: any
}) => {
  const { t } = useTranslation()
  const [editCustomKey, setEditCustomKey] = useState(false)
  const inputRef = useRef(null)

  const handleAddKeyword = (str: string) => {
    setEditCustomKey(false)
    if (!str) return
    if (inputRef.current) inputRef.current.value = ''
    onAdd(str)
  }

  // 文件s
  const [files, setFiles] = useState([])
  const [file, setFile] = useState(null)
  const loadFiles = () => {
    // if (!words.length) return setFiles([])
    clearTimeout(timer) // 简单防抖
    timer = setTimeout(() => {
      getSourceChunksApi(chatId, data.messageId, words.join(';')).then(_files => {
        setFiles(_files)
        // 默认打开第一个文件
        _files && setFile(_files[0])
      })
    }, 200)
  }
  // console.log('files :>> ', files);

  useEffect(() => {
    loadFiles()
  }, [words])

  // input show
  const handleOpenInput = () => {
    setEditCustomKey(true)
    setTimeout(() => document.getElementById('taginput')?.focus(), 0)
  }

  return (
    <div className="mt-4 flex gap-4" style={{ height: 'calc(100vh - 10rem)' }}>
      {/* left */}
      <div className="no-scrollbar h-full w-[300px] overflow-y-auto rounded-md bg-gray-100 px-2 py-4">
        {/* label */}
        <div className="mb-4 text-sm font-bold">
          {t('chat.filterLabel')}
          <div className="tooltip fixed" data-tip={t('chat.tooltipText')}>
            <span data-theme="light" className="badge cursor-pointer">
              ?
            </span>
          </div>
        </div>
        <div className="flex flex-wrap gap-2">
          {words.map((str, i) => (
            <div key={str} className="badge badge-info h-[auto] gap-2 bg-[rgba(53,126,249,.15)] text-gray-600">
              {str}
              <span className="cursor-pointer" onClick={() => onClose(i)}>
                x
              </span>
            </div>
          ))}
          {/* 自定义 */}
          {editCustomKey ? (
            <div className="badge badge-info cursor-pointer gap-2 bg-[rgba(53,126,249,.15)]">
              <input
                ref={inputRef}
                id="taginput"
                className="h-4 w-20 border-none bg-gray-50 py-0 outline-none"
                onKeyDown={event => {
                  if (event.key === 'Enter' && !event.shiftKey) {
                    handleAddKeyword(inputRef.current.value)
                  }
                }}
                onBlur={() => {
                  handleAddKeyword(inputRef.current.value)
                }}
              ></input>
            </div>
          ) : (
            <div
              className="badge badge-info cursor-pointer gap-2 bg-[rgba(53,126,249,.86)] text-gray-50"
              onClick={handleOpenInput}
            >
              <span>{t('chat.addCustomLabel')}</span>
            </div>
          )}
        </div>
        {/* files */}
        <div className="mt-4">
          <p className="mb-4 text-sm font-bold">{t('chat.sourceDocumentsLabel')}</p>
          {files.map(_file =>
            _file.right ? (
              <div
                key={_file.id}
                onClick={() => setFile(_file)}
                className={`hover-bg-gray-200 group min-h-16 relative mb-2 flex cursor-pointer items-center rounded-xl bg-[#fff] px-4 ${
                  file?.id === _file.id && 'bg-gray-200'
                }`}
              >
                <p className="break-all text-sm">{_file.fileName}</p>
                <div className="absolute right-1 top-1 hidden gap-2 group-hover:flex">
                  {_file.fileUrl && (
                    <div className="tooltip" data-tip={t('chat.downloadPDFTooltip')}>
                      <a
                        href="javascript:;"
                        onClick={event => {
                          downloadFile(checkSassUrl(_file.fileUrl), _file.fileName.replace(/\.[\w\d]+$/, '.pdf'))
                          event.stopPropagation()
                        }}
                      >
                        <Import color="rgba(53,126,249,1)" size={22} strokeWidth={1.5}></Import>
                      </a>
                    </div>
                  )}
                  {_file.originUrl && (
                    <div className="tooltip tooltip-left" data-tip={t('chat.downloadOriginalTooltip')}>
                      <a
                        href="javascript:;"
                        onClick={event => {
                          downloadFile(checkSassUrl(_file.originUrl), _file.fileName)
                          event.stopPropagation()
                        }}
                      >
                        <Download color="rgba(53,126,249,1)" size={20} strokeWidth={1.5}></Download>
                      </a>
                    </div>
                  )}
                </div>
                <span className="absolute bottom-1 right-1 text-sm text-blue-400">{_file.score}</span>
              </div>
            ) : (
              <div
                key={_file.id}
                className={`msk hover-bg-gray-200 group min-h-16 relative mb-2 flex cursor-pointer items-center rounded-xl bg-[#fff] px-4 ${
                  file?.id === _file.id && 'bg-gray-200'
                }`}
              >
                <p className="text-sm blur-sm">是真的马赛克.msk</p>
                <span className="absolute bottom-1 right-1 text-sm text-blue-400">{_file.score}</span>
              </div>
            )
          )}
          {!files.length && (
            <p className="mt-10 text-center text-sm text-gray-500">{t('chat.noMatchedFilesMessage')}</p>
          )}
        </div>
      </div>
      {/* file pane */}
      {file && children(file)}
    </div>
  )
}

const ResouceModal = forwardRef((props, ref) => {
  // labels
  const { t } = useTranslation()

  const [open, setOpen] = useState(false)
  const [keywords, setKeywords] = useState([])
  const handleAddWord = (word: string) => {
    // 去重 更新
    setKeywords(oldWords => (oldWords.find(wd => wd === word) ? oldWords : [...oldWords, word]))
  }

  const handleDelKeyword = (index: number) => {
    setKeywords(keywords.filter((wd, i) => i !== index))
  }

  const [data, setData] = useState<any>({})
  useImperativeHandle(ref, () => ({
    openModal: data => {
      setOpen(true)
      setData(data)
    }
  }))

  const MemoizedFileView = React.memo(FileView)

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogContent className="min-w-[80%]">
        {/* <DialogHeader>
                <DialogTitle>{t('chat.feedback')}</DialogTitle>
            </DialogHeader> */}
        {open && (
          <div>
            <Anwser id={data.messageId} msg={data.message} onInit={setKeywords} onAdd={handleAddWord}></Anwser>
            <ResultPanne
              words={keywords}
              chatId={data.chatId}
              data={data}
              onClose={handleDelKeyword}
              onAdd={handleAddWord}
            >
              {file =>
                file.fileUrl ? (
                  <MemoizedFileView data={file}></MemoizedFileView>
                ) : (
                  <div className="flex-1 rounded-md bg-gray-100 text-center">
                    <p className="text-md mt-[40%] text-gray-500">{t('chat.fileStorageFailure')}</p>
                  </div>
                )
              }
            </ResultPanne>
          </div>
        )}
      </DialogContent>
    </Dialog>
  )
})

export default ResouceModal
